import { Router, Route, Switch } from "react-router-dom";
import { customHistory } from "./utils";
import "./App.scss";
import { lazy, Suspense } from "react";
import { Spin } from "antd";

// 页面组件
// import Login from "./pages/Login";
// import Layout from "./pages/Layout";
import AuthRoute from "@/components/AuthRoute";

// 路由懒加载
const Login = lazy(() => import("./pages/Login"));
const Layout = lazy(() => import("./pages/Layout"));

// BrowserRouter组件已经实现了路由模式
// Router 没有实现路由模式的组件，history属性传入路由模式
const App = () => {
    return (
        <Router history={customHistory}>
            <Suspense
                fallback={
                    <div className="loading">
                        <Spin />
                    </div>
                }>
                <div className="app">
                    <Switch>
                        {/* 注意：先写login规则 */}
                        <Route path="/login" component={Login}></Route>
                        <AuthRoute path="/" component={Layout}></AuthRoute>
                    </Switch>
                </div>
            </Suspense>
        </Router>
    );
};

export default App;
